<template>
	<div>
		<div class="alert" :class="{ modify: isModify }">
			<p>
				<Icon type="md-alert" />
				{{ pageTitle }}文章
			</p>
		</div>
		<i-Form
			ref="articleFormRef"
			:model="articleInfo"
			:rules="articleFormRules"
			label-position="top"
		>
			<FormItem label="文章标题：" prop="title">
				<Input size="large" v-model="articleInfo.title" class="inputClass" />
			</FormItem>
			<FormItem label="文章正文：" prop="articleBody" id="quill">
				<quill-editor
					v-model="articleInfo.articleBody"
					ref="articleQuillEditor"
				></quill-editor>
			</FormItem>
			<FormItem label="文章地址：" prop="videoURL">
				<Input
					size="large"
					type="url"
					v-model="articleInfo.videoURL"
					class="inputClass"
				/>
			</FormItem>
		</i-Form>
		<Row>
			<i-Col :span="3" :push="12">
				<Button type="primary" @click="addArticle" style="margin-left:28px;">
					{{ pageTitle }}文章
				</Button>
			</i-Col>
		</Row>
	</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
	name: 'ArticleAdd',
	data() {
		return {
			id: '',
			// 当前页面提示栏
			pageTitle: '',
			isModify: false,
			// 提示栏背景色
			modify: 'modify',
			articleInfo: { id: '', title: '', articleBody: '', videoURL: '' },
			articleFormRules: {
				title: [{ required: true, message: '请填写文章标题', trigger: 'change' }],
				articleBody: [{ required: true, message: ' ', trigger: 'blur' }],
				videoURL: [{ required: true, message: '请填写文章地址', trigger: 'change' }]
			}
		}
	},
	computed: {
		...mapState(['notification', 'articleId'])
	},
	created() {
		this.initForm()
	},
	watch: {
		async id(id) {
			if (id) {
				this.pageTitle = '修改'
				this.isModify = true
				const { data: res } = await this.$http.articlesId(id)
				Object.keys(this.articleInfo).forEach(val => {
					if (res.hasOwnProperty(val)) {
						this.articleInfo[val] = res[val]
					}
				})
			} else {
				this.initForm()
				this.$refs.articleFormRef.resetFields()
			}
		}
	},
	async activated() {
		this.id = this.articleId
	},
	methods: {
		...mapMutations(['articleID']),
		initForm() {
			this.pageTitle = '添加'
			this.isModify = false
		},
		addArticle() {
			this.$refs.articleFormRef.validate(async valid => {
				if (!valid) {
					this.$Message.warning({
						content: '带*都为必填项，请补全',
						duration: 10,
						closable: true
					})
					return
				}
				if (!this.id) {
					const { data: res } = await this.$http.articleAdd(this.articleInfo)
					this.$refs.articleFormRef.resetFields()
				} else {
					const res = await this.$http.articlesEdit(this.articleInfo)
				}

				this.$Message.success({
					content: `${this.pageTitle}成功，2s后跳转回文章列表...`,
					duration: 2,
					closable: true
				})
				this.articleID('')
				// 跳转
				setTimeout(() => {
					this.$router.push('/articles')
					this.$refs.articleFormRef.resetFields()
				}, 2000)
				// 清空表单
			})
		}
	}
}
</script>
<style lang="less" scoped>
.alert {
	background-color: #f4f4f5;
	text-align: center;
	border-radius: 5px;
	width: 100%;
	line-height: 40px;
	color: #909399;
	margin-bottom: 20px;
	.ivu-icon-md-alert {
		font-size: 16px;
		vertical-align: text-top;
	}
}
.modify {
	background-color: #fa7e23;
	color: #f4f4f5;
}
.inputClass {
	width: 60%;
}
#quill {
	height: 230px;
	width: 60%;
	.quill-editor {
		height: 120px;
	}
}
</style>